<!DOCTYPE html>
<head>
<title>Contact</title>
<!--css-->
<link href="../assets/1/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="../assets/1/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--css-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--js-->
<script src="../assets/1/js/jquery.min.js"></script>
<script src="../assets/1/js/bootstrap.min.js"></script>
<!--js-->
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Cagliostro' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!--webfonts-->
</head>
<body>
	<!--header-->
		
	<!--header-->
		
		<div class="content">
			<!--contact-->
			<div class="contact-w3l">
				<div class="container">
					<h2 class="tittle">账户管理</h2>
					<br />
					<div class="col-md-4 contact-left">
						<div class="contct-info">
							<h4> 当前账户</h4>
							<p>您现在的账户余额为：</p>
							<ul>
								<li id="userAccountBalance"></li>
							</ul>
						</div>
					</div>
					<div class="col-md-4 contact-left">
						<div class="contct-info">
							<h4>近期流水</h4>
							<p>您的近六条流水记录：</p>
							<ul>
								<li id="R1"></li>
								<li id="R2"></li>
								<li id="R3"></li>
								<li id="R4"></li>
								<li id="R5"></li>
								<li id="R6"></li>
							</ul>
						</div>
					</div>
					<div class="col-md-4 contact-left cont">
						<div class="contct-info">
							<h4>充值</h4>
							<p>请选择充值的金额：</p>
							<br />
							<form>
								<div class="row">
									<div class="col-md-6 row-grid">
										<input type="button" style="width: 150px;height:45px;border-width: 1px" onclick="insertFifty()" value="50元">
										
									</div>
										<div class="col-md-6 row-grid">
											<input type="button" style="width: 150px;height:45px;border-width: 1px" onclick="insertHundred()" value="100元">
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="row">
									<div class="col-md-6 row-grid">
									<input type="button" style="width: 150px;height:45px;border-width: 1px" value="200元" onclick="insert200()">
									</div>
										<div class="col-md-6 row-grid">
									<input type="button" style="width: 150px;height:45px;border-width: 1px" value="500元" onclick="insert500()">
									</div>
									<div class="clearfix"></div>
								</div>
								
								<p>其他金额：</p>
								
								<textarea placeholder="recharge account" name="rechargeAccount" id="currentChargeMount"></textarea>
								<input style="width: 120px;height: 50px; background-color: darkgrey"  type="button" value="充值" onclick="putInAccount()" >
								&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
								<input style="width: 120px;height: 50px; background-color: darkgrey"  type="button" value="清空" onclick="clearText()" >
							</form>
						</div>
					</div>
				</div>
			</div>
			<!--contact-->
		</div>
</body>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function (){
		let currentUserId = $.cookie("userid");

		jQuery.post("/getUserInfoById", {"userId": currentUserId}, function (rst){
			let accountBalance = rst.userAccountBalance;
			$("#userAccountBalance").html(accountBalance + " 元");
		})

		jQuery.post("/getUserBudget", {"userId": currentUserId}, function (rst){
			let num = rst.length;
			if(num > 0){
				let json = rst[0];
				$("#R1").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
			if(num > 1){
				let json = rst[1];
				$("#R2").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
			if(num > 2){
				let json = rst[2];
				$("#R3").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
			if(num > 3){
				let json = rst[3];
				$("#R4").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
			if(num > 4){
				let json = rst[4];
				$("#R5").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
			if(num > 5){
				let json = rst[5];
				$("#R6").html(changeDateTimeFormat(json.itemDateTime) + " " + json.itemType + " " + json.itemMoney + "元");
			}
		})


	})

	function changeDateTimeFormat(time){
		var span = Date.parse(time)
		var dt = new Date(span)
		var timeStr = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
		return timeStr;
	}

	function insertFifty(){
		$("#currentChargeMount").html("50");
	}

	function insertHundred(){
		$("#currentChargeMount").html("100");
	}

	function insert200(){
		$("#currentChargeMount").html("200");
	}

	function insert500(){
		$("#currentChargeMount").html("500");
	}

	function clearText(){
		$("#currentChargeMount").html("");
	}

	function putInAccount(){
		let userIdExit = document.cookie.indexOf("userid");
		if (userIdExit == -1){
			alert("请先登录！")
		}else{
			let money = $("#currentChargeMount").val();

			if (!checkNumber(money)){
				alert("请输入正确的金额");
			}else{
				let userId = $.cookie("userid");
				jQuery.post("/addMoney", {"userId": userId, "money": money}, function (rst){
					if(rst == "充值成功"){
						alert("充值成功，账户余额已增加。");
						window.location.reload();
					}else{
						alert(rst);
					}
				})
			}
		}
	}

	//验证字符串是否是数字
	function checkNumber(theObj) {
		let reg = /^\d+$/;
		if (reg.test(theObj)) {
			return true;
		}
		return false;
	}
</script>
</html>
<style type="text/css">
	.someFront{
		color: rgb(250,98,15);
	}
	.someFront1{
		font-family: 微软雅黑, "Microsoft YaHei";
		font-size: 20px;
		color: rgb(250,98,15);
		border:none;
	}
</style>